<template>
	<div>

		<el-tabs v-model="activeName" @tab-click="handleClick">
			<!--@tab-click="#"-->
			<el-tab-pane label="未审核" name="approvalIng">
				<!--++++++++-->
				<el-row>
					<!--<el-col :span="2" style="margin-right:0px;">
					<p class="queryLabel">状态:</p>
				</el-col>
				<el-col :span="4" style="margin-right: 0px;">
					<el-select size="small" style="width:85%;" v-model="condition.enterType" placeholder="请选择状态" clearable>
						<el-option v-for="item in transferType" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-col>-->
					<el-col :span="1">
						<p class="queryLabel">申请时间:</p>
					</el-col>
					<el-col :span="4">
						<el-date-picker v-model="data.firstStart" size="small" style="width:92%;" type="date" clearable placeholder="起始日期">
						</el-date-picker>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">至:</p>
					</el-col>
					<el-col :span="4">
						<el-date-picker v-model="data.firstStarts" size="small" style="width:92%;" type="date" clearable placeholder="结束日期">
						</el-date-picker>
					</el-col>
					<el-col :span="2" style="text-align: center">
						<el-button type="primary" size="small" v-on:click='crmCouponApprovalPage'>查 询</el-button>
					</el-col>
					<el-col :span="12" style="text-align: right;">
						<el-button type="primary" size="small" @click="info">审核</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="60" fixed>
							</el-table-column>
							<el-table-column prop="num" label="优惠券号" align="right" width="250"></el-table-column>
							<el-table-column prop="name" label="所属活动" width="200"></el-table-column>
							<el-table-column prop="deptName" label="发起部门" width="200"></el-table-column>
							<el-table-column prop="shbz" label="审批进度" width="200"></el-table-column>
							<el-table-column prop="createUser" label="创建人员" width="200"></el-table-column>
							<el-table-column prop="createTime" label="创建时间" width="200" :formatter="timeFormate2"></el-table-column>
							<el-table-column prop="gift" label="礼品名称" width="200"></el-table-column>
							<el-table-column prop="youxiaoqi" align="center" label="有效期" :formatter="timeFormates" width="150"></el-table-column>
							<el-table-column prop="plateNum" label="车牌号" width="150"></el-table-column>
							<!--<el-table-column label="操作" align="right" width="100">
								<template scope="scope">
									<el-button type="primary" size="mini" @click.native.prevent="info(scope.$index)">审核</el-button>
								</template>
							</el-table-column>-->
							<!--<el-table-column prop="contactName" label="车主姓名" width="200"></el-table-column>
						<el-table-column prop="contactPhone" align="right" label="联系电话" width="150"></el-table-column>
						<el-table-column prop="useDate" align="center" label="使用时间" :formatter="timeFormate" width="200"></el-table-column>
						<el-table-column prop="dayinDate" align="center" label="打印时间" :formatter="dytimeFormate" width="200"></el-table-column>
						<el-table-column prop="gongdanId" label="关联工单号" width="200"></el-table-column>
						<el-table-column prop="status" label="使用状态" :formatter="levelCov" width="150"></el-table-column>-->
							</el-table-column>
						</el-table>
						<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
						</el-pagination>
					</el-col>
				</el-row>
				<el-dialog title="优惠券审批" v-model="comFormShow" size="normal">
					<el-card>
						<el-form :model="comFormData" ref="comForm" label-width="100" :rules="Rule" style="width: 900px;">
							<el-row>
								<el-col :span="24">
									<el-form-item label="优惠券号：" prop="num">
										<span v-for="item in comFormData.num">
											{{item}}&nbsp;&nbsp;&nbsp;
										</span>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="所属活动：" prop="name">
										<el-input size="small" v-model="comFormData.name" readonly></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="发起部门：" prop="deptName">
										<!--estimateBackDate-->
										<el-input size="small" v-model="comFormData.deptName" readonly></el-input>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="审批进度：" prop="shbz">
										<el-input size="small" v-model="comFormData.shbz" readonly></el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="8">
									<el-form-item label="礼品名称：" prop="gift">
										<el-input size="small" v-model="comFormData.gift" readonly></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="车牌号：" prop="plateNum">
										<el-input size="small" v-model="comFormData.plateNum" readonly></el-input>
									</el-form-item>
								</el-col>
							</el-row>

						</el-form>
					</el-card>
					<el-card class="box-card-r">
						<el-col :span="2" style="margin-left: 0px;">
							<p class="queryLabel">审批意见:</p>
						</el-col>
						<el-col :span="22">
							<el-input size="small" type="textarea" :rows="2" v-model="approvalData.approvalData.approvalOpinion"></el-input>
						</el-col>
					</el-card>
					<div slot="footer" class="dialog-footer">
						<el-button @click="comFormShow = false">取 消</el-button>
						<el-button type="primary" v-on:click='pass(Number(comFormData.approvalStatus)+1,1)'>通 过</el-button>
						<el-button type="danger" v-on:click='pass("0",0)'>驳 回</el-button>
					</div>
				</el-dialog>
				<!--++++++++-->
			</el-tab-pane>

			<!--已审核优惠券管理-->
			<el-tab-pane label="已审核" name="approvalPass">

				<el-row>
					<el-col :span="2" style="margin-left: 0px;">
						<p class="queryLabel">审批时间:</p>
					</el-col>
					<el-col :span="4">
						<el-date-picker v-model="passData.firstStart" size="small" style="width:92%;" type="date" clearable placeholder="起始日期">
						</el-date-picker>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">至:</p>
					</el-col>
					<el-col :span="4">
						<el-date-picker v-model="passData.firstStarts" size="small" style="width:92%;" type="date" clearable placeholder="结束日期">
						</el-date-picker>
					</el-col>
					<el-col :span="12" style="padding-left: 0px;text-align: right">
						<el-button type="primary" size="small" v-on:click='crmCouponApprovalPassPage'>查 询</el-button>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-table :data="approvalPassDataList" border style="width: 100%;align-content: center;">
							<!--<el-table-column type="selection" width="60" fixed>
							</el-table-column>-->
							<el-table-column prop="num" label="优惠券号" align="right" width="250"></el-table-column>
							<el-table-column prop="name" label="所属活动" width="200"></el-table-column>
							<el-table-column prop="deptName" label="发起部门" width="200"></el-table-column>
							<el-table-column prop="shbz" label="审批进度" width="200"></el-table-column>
							<el-table-column prop="createUser" label="创建人员" width="200"></el-table-column>
							<el-table-column prop="gift" label="礼品名称" width="200"></el-table-column>
							<el-table-column prop="youxiaoqi" align="center" label="有效期" :formatter="timeFormates" width="150"></el-table-column>
							<el-table-column prop="plateNum" label="车牌号" width="150"></el-table-column>
							<el-table-column prop="uName" label="审批人员" width="150"></el-table-column>
							<el-table-column prop="approvalStatus" label="审批结果" width="150"></el-table-column>
							<el-table-column prop="approvalDate" label="审批时间" width="150"></el-table-column>
							<el-table-column prop="approvalOpinion" label="审批意见" width="150"></el-table-column>
							</el-table-column>
						</el-table>
						<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange2" :current-page="CurentPage2" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="approvalPassTotal">
						</el-pagination>

					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>

	</div>
</template>
<script>
	export default {
		data: function() {
			return {
				passShow: true,
				passData: {
					firstStart: "",
					firstStarts: "",
				},
				activeName: "approvalIng", // 默认未审核界面
				approvalPassDataList: [],
				approvalPassTotal: 0,
				//仓库转换
				levelConvertData: {},
				//调拨类型
				transferTypeCombo: [{
					label: '二网调拨',
					value: '0'
				}, {
					label: '临时挑拨',
					value: '2'
				}, {
					label: '外展调拨',
					value: '1'
				}],
				comFormShow: false,
				//日期查询条件
				data: {
					firstStart: "",
					firstStarts: ""
				},
				//预计天数
				dayNum: "0",
				//页码数
				CurentPage: 1,
				//页码数
				CurentPage2: 1,
				//每页的数量
				page: this.page,
				//仓库类型下拉
				warehouseType: [],
				//仓库下拉
				warehouseCombo: [],
				//合格证状态
				certificateStatusCovertData: {},

				//车辆销售状态下拉
				transferType: [{
					label: '未调拨',
					value: '0'
				}, {
					label: '已出库',
					value: '1'
				}, {
					label: '已入库',
					value: '2'
				}],
				comFormData: {
					id: [],
					num: [],
					name: "",
					deptName: "",
					shbz: "",
					createUser: "",
					createTime: "",
					gift: "",
					youxiaoqi: "",
					plateNum: "",
					approvalStatus: "",
				},
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},

				condition: {
					enterType: "",
					carModel: "",
					wareHouse: "",
					enterTimeStart: "",
					enterTimeStop: "",

				},
				//审批信息
				approvalData: {
					approvalData: {
						billId: "",
						approvalOpinion: "",
						approvalStatus: "",
					},
					ids: [],
				},

				conditions: {
					ID: "",
					allocationId: "",
					approvaler: "",
					approvalStatus: "",
					approvalDate: "",
					approvalOpinion: "",
					companyId: "",
				},
				//warehouseFormShow: false,
				//校验规则
				Rule: {

				},

				multipleSelection: [],
				companyId: "",

				//树形图查询条件
				dictTreeSearchValue: "",
				paramTreeData: [],
				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'label',
				},
				showStart: false,
				//选中的类型（车型/车系）
				carType: '',
				//选择的车辆信息
				datalabel: '',
				datavale: '',
				//车型名称
				carModelName: "",
			}
		},
		methods: {
			dateChange: function() {

				this.$data.dayNum = this.DateDiff(this.$data.comFormData.allocationOrder.allocationDate, this.$data.comFormData.allocationOrder.arriveWarehouseDate)
				debugger;
			},
			//标签监听
			handleClick: function(tab, event) {
				if(this.$data.activeName == "approvalIng") { //标签1
					//alert(1);
					this.crmCouponApprovalPage();
				} else {
					//alert(2);
					this.crmCouponApprovalPassPage();
				}

			},
			//审核
			pass: function(type, status) {
				this.$data.approvalData.approvalData.approvalStatus = status;
				this.$data.approvalData.ids = this.$data.comFormData.id;
				if(this.$data.approvalData.approvalData.approvalOpinion == "") {
					this.$message.error("请填写审批意见！");
				} else {
					this.approvalDataPost(type); //调用审核接口
				}
			},
			//调用审核接口方法
			approvalDataPost: function(type) {
				this.$http.post(this.API_ROOT + '/crm/coupon/updateApprovalStatus', this.$data.approvalData, {
					params: {
						//id: this.$data.comFormData.id,
						status: type
					}
				}).then((response) => {
					if(response.data.success) {
						debugger;
						//this.$data.yewuShow =false;
						this.$message(response.data.msg);
						this.crmCouponApprovalPage();
						this.$data.comFormShow = false;
					} else {
						debugger;
						this.$message.error(response.data.msg);
					}
				}, (response) => {});
			},
			//状态转换
			statusCov: function(row, column) {
				var temp = '';
				switch(row.allocationStatus) {
					case '0':
						temp = "已保存";
						break;
					case '1':
						temp = '已提交';
						break;
					case "2":
						temp = '已审核';
						break;
					default:
						''
						break
				};
				return temp;
			},
			//创建时间解析
			timeFormate2: function(row, column) {
				if(row.createTime == "" || row.createTime == null) return "";
				return this.moment(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss");
			},
			//使用时间解析
			timeFormate: function(row, column) {
				if(row.useDate == "" || row.useDate == null) return "";
				return this.moment(Number(row.useDate)).format("YYYY-MM-DD HH:mm:ss");
			},
			//有效期解析
			timeFormates: function(row, column) {
				if(row.youxiaoqi == "" || row.youxiaoqi == null) return "";
				return this.moment(Number(row.youxiaoqi)).format("YYYY-MM-DD");
			},
			info: function() {
				debugger;
				//初始化
				this.$data.comFormData.num = [];
				this.$data.comFormData.id = [];
				this.$data.comFormData.name = "";
				this.$data.comFormData.deptName = "";
				this.$data.comFormData.shbz = "";
				this.$data.comFormData.createUser = "";
				this.$data.comFormData.createTime = "";
				this.$data.comFormData.gift = "";
				this.$data.comFormData.youxiaoqi = "";
				this.$data.comFormData.plateNum = "";
				this.$data.comFormData.approvalStatus = "";
				if(this.$data.multipleSelection.length == 0) {
					this.$message.error("请选择优惠券");
				}else if(this.$data.passShow == true){
					for(var i = 0; i < this.$data.multipleSelection.length; i++) {
						this.$data.comFormData.num[i] = this.$data.multipleSelection[i].num;
						this.$data.comFormData.id[i] = this.$data.multipleSelection[i].id;
					}
					this.$data.comFormData.name = this.$data.multipleSelection[0].name;
					this.$data.comFormData.deptName = this.$data.multipleSelection[0].deptName;
					this.$data.comFormData.shbz = this.$data.multipleSelection[0].shbz;
					this.$data.comFormData.createUser = this.$data.multipleSelection[0].createUser;
					this.$data.comFormData.createTime = this.$data.multipleSelection[0].createTime;
					this.$data.comFormData.gift = this.$data.multipleSelection[0].gift;
					this.$data.comFormData.youxiaoqi = this.$data.multipleSelection[0].youxiaoqi;
					this.$data.comFormData.plateNum = this.$data.multipleSelection[0].plateNum;
					this.$data.comFormData.approvalStatus = this.$data.multipleSelection[0].approvalStatus;
					this.$data.approvalData.approvalData.approvalOpinion = ""; //清空审核意见
					this.$data.comFormShow = true;
				}else {
					this.$message.error("所选数据不符合审核条件")
				}


			},
			//查询树节点
			searchTree: function() {
				if(this.$data.dictTreeSearchValue == "") {
					this.$message("请输入查询条件");
					this.queryParamTree();
					return;
				}
				this.$refs.dictTree.filter(this.$data.dictTreeSearchValue);
			},
			//点击资源树节点
			handleNodeClick(data) {
				debugger;
				this.$data.carType = data.type;
				this.$data.datalabel = data.label;
				this.$data.datavale = data.value;
			},
			//查询参数树
			queryParamTree: function() {
				//获取资源树
				debugger;
				this.$http.get(this.API_ROOT + '/base/car/tree', {}).then((response) => {
					this.$data.paramTreeData = response.data;
				}, (response) => {});
			},
			//资源过滤
			filterNode: function(value, data, node) {
				if(!value) return true;
				return data.label.indexOf(value) !== -1;
			},

			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.passShow = true;
				this.$data.multipleSelection = val;
				if(this.$data.multipleSelection.length >= 2) {
					//批量处理只能选择同一辆车的同一种活动
					for(var i = 1; i < this.$data.multipleSelection.length; i++) {
						if(this.$data.multipleSelection[i].name != this.$data.multipleSelection[i - 1].name) {
							this.$message.error("请选择同一种活动！");
							this.$data.passShow = false;
							break;
						}
						if(this.$data.multipleSelection[i].plateNum != this.$data.multipleSelection[i - 1].plateNum) {
							this.$message.error("请选择同一辆车！");
							this.$data.passShow = false;
							break;
						}
						if(this.$data.multipleSelection[i].shbz != this.$data.multipleSelection[i - 1].shbz) {
							this.$message.error("请选择同一种审批进度！");
							this.$data.passShow = false;
							break;
						}
					}
				}

			},

			//			add: function() {
			//				this.$data.warehouseFormData = Object.assign(this.$data.warehouseFormData, this.$data.emptyWarehouseFormData);
			//				this.$data.warehouseFormShow = true;
			//			},

			//查询优惠券审批列表
			crmCouponApprovalPage: function() {
				debugger;
				this.$data.condition.enterTimeStart = this.momentFu(this.$data.data.firstStart);
				this.$data.condition.enterTimeStop = this.momentFu(this.$data.data.firstStarts);
				this.$http.post(this.API_ROOT + '/crm/coupon/approvalPage', this.$data.condition, {
					params: {
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						//this.$data.exFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
				debugger;
			},
			crmCouponApprovalPassPage: function() {
				//alert("已审核");
				debugger;
				this.$data.condition.enterTimeStart = this.momentFu(this.$data.passData.firstStart);
				this.$data.condition.enterTimeStop = this.momentFu(this.$data.passData.firstStarts);

				this.$http.post(this.API_ROOT + '/crm/coupon/approvaledPage', this.$data.condition, {
					params: {
						start: this.$data.CurentPage2,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$data.approvalPassTotal = parseInt(resp.data.total);
						this.$data.approvalPassDataList = resp.data.dataList;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
				debugger;
			},
			//时间判断为空的封装
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM-DD");
				}
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				debugger;
				//this.$data.dictGroup = '';
				this.crmCouponApprovalPage();
			},
			//列表,当前页切换
			handleCurrentChange2: function(currentPage) {
				this.$data.CurentPage2 = currentPage;
				debugger;
				//this.$data.dictGroup = '';
				this.crmCouponApprovalPassPage();
			},
			//调拨类型
			saleStatusCov: function(row, column) {
				var temp = "";
				switch(row.allocationType) {
					case '0':
						temp = "二网调拨";
						break;
					case '2':
						temp = '临时调拨';
						break;
					case "1":
						temp = '外展调拨';
						break;
					default:
						''
						break
				};
				return temp;
			},
			//发出仓库代码与名称转换
			fromWarehouseCov: function(row, column) {
				return this.$data.levelConvertData[row.fromWarehouse];
			},
			//接受仓库代码与名称转换
			aimWarehouseCov: function(row, column) {
				return this.$data.levelConvertData[row.aimWarehouse];
			},
			//仓库转换转换
			warehouseCovert: function() {
				this.$http.get(this.API_ROOT + '/scm/warehouse/convert', {
					params: {}
				}).then((response) => {
					this.$data.levelConvertData = response.data;
				}, (response) => {});
			},
		},
		//表单创建时执行
		created: function() {
			this.crmCouponApprovalPage();
		},
	}
</script>
<style>
	.el-table .info-row {
		height: 10px !important;
	}

	.item {
		width: 30px;
	}

	.el-form-item {
		clear: both;
	}

	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}

	.el-table {
		height: 100%;
		width: 100%;
	}

	#el-select {
		width: 200px;
	}

	.box-card-r {
		width: 100%;
		height: 90px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
</style>